<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <span style="margin-left:10px">市场人员姓名：</span>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入院校名称" v-model="listQuery.marketerName" clearable></el-input>
      <span style="margin-left:10px">市场人员手机号：</span>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入院校名称" v-model="listQuery.marketerMobile" clearable></el-input>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="searchMarketer">搜索</el-button>
    </div>    
    <el-table :key='tableKey' :data="marketerList" v-loading="marketerListLoading" element-loading-text="数据加载中，请稍后" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID">
        <template slot-scope="scope">
          <span>{{scope.row.marketerId}}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{scope.row.marketerName}}</span>
        </template>
      </el-table-column>
      
      <!-- <el-table-column align="center" label="联系方式">
        <template slot-scope="scope">
          <span>{{scope.row.marketerMobile}}</span>
        </template>
      </el-table-column> -->

      <el-table-column width="800" align="center" label="关联院校" type="expand">
        <template slot-scope="scope" style="textAlign: center">
          <el-tag 
            v-for="(item, index) of scope.row.academys" 
            :key="index" 
            closable 
            @close="deleteSchool(item, scope.row.marketerId)"
            style="margin-right: 10px; margin-bottom: 10px;"
          >{{ item.academyName }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="chooseSchool(scope.row.marketerId, scope.row.academys)" :disabled="scope.row.isDelete == 1" >调整关联院校</el-button>
        </template>
      </el-table-column>
    </el-table>  

    <div v-show="!marketerListLoading" class="pagination-container">
      <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10,20,30,50]" 
        :page-size="listQuery.pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total"
      >
      </el-pagination>
    </div>

    <school-set :dialog="setDialog" :setMsgObj="{setSchoolLists, setId}" @cancel="setDialogCancel"></school-set>

  </div>  
</template>

<script>
  
  import SchoolSet from './components/schoolSet'
  import { academyIdAndName, deleteSchoolById, searchMarketer_academy } from '@/api/marketer'
  export default {
    data() {
      return {
        tableKey: 0,
        marketerListLoading: false, // 市场人员列表加载
        // 市场人员信息列表
        marketerList: null,
        setDialog: false,
        setId: null,
        setSchoolLists: [],
        listQuery: {
          pageNo: 1,
          pageSize: 10,
          marketerMobile: null,
          marketerName: ''
        },
        total: null
      }
    },
    components: {
      SchoolSet
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 通过电话和姓名搜索市场人员
      searchMarketer(){
        const params = this.listQuery
        searchMarketer_academy(params).then(res => {
          if(res.code == 0) {
            this.total = res.data.total
            this.marketerList = res.data.list
            this.marketerListLoading = false
          }
        })
      },
      // 获取市场人员列表信息
      getList() {
        this.marketerListLoading = true
        const params = this.listQuery
        academyIdAndName(params).then(response => {
          const { code, data:{ total, list } } = response
          if(code == 0){
            this.total = total
            this.marketerList = list
            this.marketerListLoading = false
            this.setSchoolLists = []
          }
        }).catch(() => {
          this.marketerListLoading = false
        })
      },
      setDialogCancel() {
        this.setDialog = false
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageNo = val
        this.getList()
      },
      // 市场人员删除指定的院校权限
      deleteSchool(school, marketerId) {
        const _that = this
        this.$confirm(`是否将 “${school.academyName}” 从该市场人员的权限中删除？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          const params = {
            academyId: school.academyId,
            marketerId
          }
          deleteSchoolById(params).then(response => {
            if (response.code == 0) {
              this.$message({
                message: '删除成功',
                type: 'success',
                center: true
              })
              _that.getList()
            }
          })
        }).catch(() => {})
      },
      chooseSchool(id, schoolArr) {
        this.setId = id
        this.setSchoolLists = schoolArr
        this.setDialog = true
      }
  
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    padding:20px;
  }
  .pagination-container{
    margin-top:30px;
  }
  /deep/ .el-table__expanded-cell {
    text-align: center;
  }
</style>
